<!-- here is the script that will do the ajax. It is triggered when the form is submitted -->
<script type="text/javascript">
function CKupdate(){
   CKEDITOR.instances['editor1'].setData('');
   CKEDITOR.instances['editor2'].setData('');
   CKEDITOR.instances['editor3'].setData('');
   CKEDITOR.instances['editor1-edit'].setData('');
   CKEDITOR.instances['editor2-edit'].setData('');
   CKEDITOR.instances['editor3-edit'].setData('');

}

function styleMode()
{
    var style = $('#style-selector').val();   
    var style_edit = $('#style-selector-edit').val();   
    var type = '<?php echo $type ?>';
    if(style == "Main Style" || style == "1 Text Style" || type == 'description')
    {
        $("#content2").css("display","none");
        $("#content3").css("display","none");
    }
    else if(style == "2 Text Style")
    {
        $("#content2").css("display","block");  
        $("#content3").css("display","none");    
    }
    else if(style == "3 Text Style")
    {
        $("#content2").css("display","block");   
        $("#content3").css("display","block");   
    }


    if(style_edit == "Main Style" || style_edit == "1 Text Style")
    {
        $("#content2-edit").css("display","none");
    }
    else
    {
        $("#content2-edit").css("display","block");   
    }
}

function fillCarID()
{
    var car_id = $('#car-selector').val();   
    $('#car_id').val(car_id);
}

function fillTable()
{
    var car_id = $('#car-selector').val();

    $('#datatable').dataTable( {
        "bDestroy": true,
        "ajax": "<?php echo base_url() ?>administrator/car/load_list/<?PHP echo $type ?>/" + car_id
    } );    
}

function fillPublishTable()
{
    $('#datatable-publish').dataTable( {
        "bDestroy": true,
        "ajax": "<?php echo base_url() ?>administrator/car/load_list_publish"
    } );
}

function closeModal()
{
     $('#add-modal').modal('hide');
     $('#edit-modal').modal('hide');
}

function deleteData(id)
{
    var result = confirm("Are you sure to delete this data?");
    if (result) 
    {
        //Logic to delete the item

        var form_data = {
            id: id,
            ajax: '1'   
          };

          $.ajax({
            url: "<?php echo base_url() ?>administrator/car/delete",
            type: 'POST',
            data: form_data,
            success: function() {
               fillTable();
               fillPublishTable();
               showDeleteNotification();
            }
          });
          
          return false;
    }   
}

function editData(id)
{    
    $.getJSON("<?php echo base_url() ?>administrator/car/edit/" + id, function(data){
      $.each(data, function(i,item){
          
          $("#id-edit").val(item['id']);
          $("#style-edit").val(item['style']);
          $("#title-edit").val(item['title']);
          $("#order_num-edit").val(item['order_num']);
          CKEDITOR.instances['editor1-edit'].setData(item['content1']);          
          CKEDITOR.instances['editor2-edit'].setData(item['content2']);
          $("#current-image").attr("src", '<?php echo base_url() ?>uploads/car_overview/'+item['image']);
          
          $('#edit-modal').modal('toggle');
      });
    });
}

function publish(id)
{
    var form_data = {
        car_id: id,
        ajax: '1'   
      };

      $.ajax({
        url: "<?php echo base_url() ?>administrator/car/publish_overview",
        type: 'POST',
        data: form_data,
        success: function() {
           fillTable();
           fillPublishTable();
           showUpdateNotification();
        }
      });
}

$(function(){   
    fillTable();
    fillPublishTable();
    styleMode();
    fillCarID();

    $(".loading").hide();
    $(".error-upload").hide();

    $("#car-selector").change(function() {
        fillTable();
        fillCarID();
    });

    $("#style-selector").change(function() {
        styleMode();
    });

    $("#style-selector-edit").change(function() {
        styleMode();
    });

    $('#form-content').on('submit',(function(e) {
        e.preventDefault();

        var formData = new FormData(this);
        var editor1 = CKEDITOR.instances['editor1'].getData();
        var editor2 = CKEDITOR.instances['editor2'].getData();
        var type = '<?php echo $type ?>';

        formData.append('editor1',editor1);
        formData.append('editor2',editor2);
        formData.append('type',type);
        $(".loading").show();
        $.ajax({
            type:'POST',
            url:"<?php echo base_url(); ?>administrator/car/add",
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
               $(".loading").hide();
               closeModal();
               fillTable();
               fillPublishTable();
               showSaveNotification();
               resetForm();
               CKupdate();
            },
            error: function(data){
                $(".loading").hide();
               $(".error-upload").show();
            }
        });
    }));    

    $('#form-edit').on('submit',(function(e) {
        e.preventDefault();

        var formData = new FormData(this);
        var editor1 = CKEDITOR.instances['editor1-edit'].getData();
        var editor2 = CKEDITOR.instances['editor2-edit'].getData();

        formData.append('editor1',editor1);
        formData.append('editor2',editor2);
        $(".loading").show();
        $.ajax({
            type:'POST',
            url:"<?php echo base_url(); ?>administrator/car/update",
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
               $(".loading").hide();
               closeModal();
               fillTable();
               showUpdateNotification();
              
            },
            error: function(data){
                $(".loading").hide();
               $(".error-upload").show();
            }
        });
    }));    
});

</script>

<div class="col-md-12 ">
    <div class="alert alert-success save-notif hide">
        <strong>Success!</strong> New record has been added.
    </div>

    <div class="alert alert-info update-notif hide">
        <strong>Success!</strong> You have to change the data .
    </div>

    <div class="alert alert-warning delete-notif hide">
        <strong>Warning!</strong> The record has been deleted.
    </div>
    <!-- BEGIN Portlet PORTLET-->
    <div class="portlet box blue-hoki">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-list"></i>List of Car <?php echo ucfirst($type) ?>
            </div>
            <div class="tools">
                <a href="javascript:;" class="collapse" data-original-title="" title="">
                </a>
           </div>
            <div class="actions">
                <a class="btn btn-default btn-sm" data-toggle="modal" href="#add-modal">
                <i class="fa fa-plus"></i> Add </a>
                <a class="btn btn-icon-only btn-default btn-sm fullscreen" href="javascript:;" data-original-title="" title="">
                </a>
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="form-group">
                    <label class="col-md-2 control-label" style="margin-top:8px;"><b>Car Selector</b></label>
                    <div class="col-md-3">
                        <select id="car-selector" class="form-control">
                            <?php
                                foreach ($query_car->result() as $row) 
                                {
                            ?>
                                <option value="<?php echo $row->car_id ?>"><?php echo $row->series_name?></option>
                            <?php
                                    
                                }
                            ?>
                        </select>
                    </div>
                </div>
            </div>
            <br>
            <br>
            <table class="table table-striped table-hover table-bordered" id="datatable">
                <thead>
                    <tr>
                        <th>Order Number</th>
                        <th>Created By</th>
                        <th>Cars</th>
                        <th>Title</th>
                        <th>Style</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <!-- END Portlet PORTLET-->
</div>

<!-- END Column -->

<div class="modal bs-modal-lg fade" id="add-modal" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Add New Content</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="form-content" method="post" role="form" enctype="multipart/form-data">
                <div class="form-body">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Style</label>
                        <div class="col-md-9">
                            <input type="hidden" name="car_id" id="car_id">
                            <select id="style-selector" name="style" class="form-control input-medium">
                                <?php
                                    if($type == 'overview' || $type == 'specification' || $type == 'feature')
                                    {
                                ?>
                                <option value="Main Style">Main Style</option>
                                <option value="3 Text Style">3 Text Style</option>
                                <option value="2 Text Style">2 Text Style</option>
                                <option value="1 Text Style">1 Text Style</option>
                                <?php
                                    }
                                    else if($type == 'description')
                                    {

                                ?>
                                <option value="The image on the right">The image on the right</option>
                                <option value="The image on the left">The image on the left</option>
                                <?php
                                    }
                                ?>
                            </select>
                        </div>
                    </div>        
                    <div class="form-group">
                        <label class="col-md-3 control-label">Title</label>
                        <div class="col-md-9">
                            <input type="text" id="title" class="form-control input-medium" name="title" placeholder="Enter title">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Content 1</label>
                        <div class="col-md-9">
                            <textarea class="ckeditor form-control" name="editor1" id="editor1" rows="6"></textarea>
                        </div>
                    </div>
                    <div class="form-group" id="content2">
                        <label class="col-md-3 control-label">Content 2</label>
                        <div class="col-md-9">
                            <textarea class="ckeditor form-control" name="editor2" id="editor2" rows="6"></textarea>
                        </div>
                    </div>
                    <div class="form-group" id="content3">
                        <label class="col-md-3 control-label">Content 3</label>
                        <div class="col-md-9">
                            <textarea class="ckeditor form-control" name="editor3" id="editor3" rows="6"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Image</label>
                        <div class="col-md-3">
                            <input type="file" name="image">
                        </div>
                        <div class="col-md-6">
                            <span class="loading">Please wait for uploading...</span>
                            <span class="error-upload">Upload Error...</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Order Number</label>
                        <div class="col-md-9">
                            <input type="text" id="order_num" name="order_num" class="form-control input-small" placeholder="Enter Order Number">
                        </div>
                    </div>
                </div>
            
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
                <input type="submit" id="save-button" class="btn blue" value="Save changes">
            </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal bs-modal-lg fade" id="edit-modal" tabindex="-1" role="basic" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Modify Content</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="form-edit" method="post" role="form" enctype="multipart/form-data">
                <div class="form-body">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Style</label>
                        <div class="col-md-9">
                            <input type="hidden" name="id" id="id-edit">
                            <select id="style-selector-edit" name="style" class="form-control input-medium">
                                <option value="Main Style">Main Style</option>
                                <option value="2 Text Style">2 Text Style</option>
                                <option value="1 Text Style">1 Text Style</option>
                            </select>
                        </div>
                    </div>        
                    <div class="form-group">
                        <label class="col-md-3 control-label">Title</label>
                        <div class="col-md-9">
                            <input type="text" id="title-edit" class="form-control input-medium" name="title" placeholder="Enter title">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Content 1</label>
                        <div class="col-md-9">
                            <textarea class="ckeditor form-control" name="editor1-edit" id="editor1-edit" rows="6"></textarea>
                        </div>
                    </div>
                    <div class="form-group" id="content2-edit">
                        <label class="col-md-3 control-label">Content 2</label>
                        <div class="col-md-9">
                            <textarea class="ckeditor form-control" name="editor2-edit" id="editor2-edit" rows="6"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Image</label>
                        <div class="col-md-3">
                            <input type="file" name="image">
                            <img id="current-image" width="200px"></img>
                        </div>
                        <div class="col-md-6">
                            <span class="loading">Please wait for uploading...</span>
                            <span class="error-upload">Upload Error...</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Order Number</label>
                        <div class="col-md-9">
                            <input type="text" id="order_num-edit" name="order_num" class="form-control input-small" placeholder="Enter Order Number">
                        </div>
                    </div>
                </div>
            
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
                <input type="submit" id="save-button" class="btn blue" value="Save changes">
            </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>